<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
        .left_nav{
            position: fixed;
            left: 130px;
            top: 545px;
            width: 35px;
            height: 369px;
        }
        .box-1{
            list-style: none;
            height: 36px;
            width: 36px;
            background-color: red;
            color: white;
            font-size: 12px;
            text-align: center;
            line-height: 36px;
        }
        .left_nav_t a{
            text-decoration: none;
        }
        .left_nav_d{
            width: 35px;
            height: 332px;
            list-style: none;
        }
        .left_nav_d a{
            color: white;
            text-decoration: none;
        }
        .left_nav_d a li{
            width: 36px;
            height: 36px;
            font-size: 12px;
            background-color: #626262;
            margin: 1px auto;
        }
        .left_nav_d a li div{
            width: 24px;
            height: 28px;
            line-height: 12px;
            margin: auto;
            padding-top: 5px;
        }
        #xxx{
            position: relative;
        }
        #xxx img{
            position: absolute;
            left: 10px;
            top: 5px;
        }
        #xxx div{
            padding-top: 17px;
        }
        #box-2:hover{
            background-color: deepskyblue;
        }
        #box-3:hover{
            background-color: #64C333;
        }
        #box-4:hover{
            background-color: #EA5F8D;
        }
        #box-5:hover{
            background-color: #19C8A9;
        }
        #box-6:hover{
            background-color: #F7A945;
        }
        #box-7:hover{
            background-color: #F15453;
        }
        #box-8:hover{
            background-color: black;
        }
        #box-9:hover{
            background-color: black;
        }
        #right_nav{
            position: fixed;
            left: 98.1%;
            width: 35px;
            height: 100%;
            background-color: black;
        }
        #mao{
            height: 35px;
            width: 35px;
            position: absolute;
            top: 200px;
            border-bottom: 1px solid #ccc;  
        }
        #mao:hover{
            background-color: red;
        }
        #tequan{
            height: 35px;
            width: 82px;
            background-color: #cccccc;
            color: white;
            position: relative;
            display: none;
        }
        #gouwuche{
            position: fixed;
            top: 257px;
            color: white;
            height: 90px;
            width: 22px;
            margin-top: -10px;
            padding-left: 13px;
            border-bottom: 1px solid #ccc;

        }
        #gouwuchewz{
            margin-top: 15px;
            font-size: 12px;
            width: 20px;

        }
        #gouwuche:hover{
            background-color: red;
        }
        #qian{
            width: 35px;
            height: 35px;
            color: white;
            position: absolute;
            top: 340px;
            text-align: center;
            margin-top: -8px;
            line-height: 35px;
        }
        #qian:hover{
            background-color: red;
        }
    </style>
    <title></title>
</head>
<body style="height: 5000px;">
<!--左侧边栏-->
        <div class="left_nav">
            <div class="left_nav_t">
                <a href=""><li class="box-1">导航</li></a>
            </div>
            <div class="left_nav_d">
                <a href=""><li id="box-2"><div>潮电酷玩</div></li></a>
                <a href=""><li id="box-3"><div>居家生活</div></li></a>
                <a href=""><li id="box-4"><div>美丽人生</div></li></a>
                <a href=""><li id="box-5"><div>户外出行</div></li></a>
                <a href=""><li id="box-6"><div>亲子时光</div></li></a>
                <a href=""><li id="box-7"><div>打造爱巢</div></li></a>
                <a href=""><li id="box-8"><div>品牌旗舰</div></li></a>
                <a href=""><li id="box-9"><div>猜你喜欢</div></li></a>
                <a href="">
                    <li id="xxx" style="background-color: #A8A8A8;"><div>顶部</div>
                        <img src="xxx.jpg" alt=""/>
                    </li>
                </a>
            </div>
        </div>
<!--右侧边栏-->
<div id="right_nav">
    <a href=""><div id="mao"><img src="mao.jpg" alt="图片"/></div></a>
    <a href=""><div id="gouwuche"><div id="gouwuchewz">购物车</div></div></a>
    <a href=""><div id="qian">￥</div></a>
</div>
<a href="" style="text-decoration: none; text-align: center; line-height: 35px"><div id="tequan">我的特权</div></a>
<script>
        var xxx=document.getElementById("xxx");
        var mao=document.getElementById("mao");
        var tequan=document.getElementById("tequan");
        var time1=null,time2=null,time3=null,time4=null;
        var op=0;
        var ind=0;
        function clear(){
            clearTimeout(time1);
            clearTimeout(time2);
            clearTimeout(time3);
            clearTimeout(time4);
        }
        mao.onmouseover=function(){
            mao.onmouseover=function(){
                clear();
                time1=setTimeout(function(){
                    tequan.style.display="block";
                    clear();
                    time2=setInterval(function(){
                        if(op>=1){
                            ind=40;
                            op=1;
                            clear()
                        }
                        op+=0.05;
                        ind+=1;
                        tequan.style.opacity=op;
                        tequan.style.left=ind+"px";
                    },10)
                },300)
            }
            mao.onmouseout=function(){
                clear();
                time3=setTimeout(function(){
                    clear();
                    time4=setInterval(function(){
                        if(op<=0){
                            ind=0;
                            op=0;
                            clear();
                            tequan.style.display="none";
                        }
                        op-=0.05;
                        ind-=2;
                        tequan.style.opacity=op;
                        tequan.style.left=ind+"px";
                    },20)
                },500)
            }
        }
        xxx.onclick = function () {
            document.body.scrollTop = 0;
        }
</script>
</body>
</html>